<script setup lang="ts">
import { ref, type Ref, onMounted } from 'vue';
import { getDataFn } from '@/api/getPro';
import { getCartFn } from '@/api/cart';
import { useUserStore } from '@/stores/user';
import HeaderCom from '../../components/header/HeaderCom.vue';


const value1: Ref<number> = ref(0);
const buyList: Ref<Array<any>> = ref([])
const cartList: Ref<Array<any>> = ref([])
const total: Ref<number> = ref(0);
const user = useUserStore();

const option1 = [
  { text: '外卖订单', value: 0 },
  { text: '到店自取', value: 1 },

];

onMounted(() => {
  //获取购物车数量 当前店铺的
  getDataFn().then(res => {
    console.log(res);
    buyList.value = res.slice(0, 2)
    console.log(buyList.value);
  })

  getCartFn().then(res => {
    console.log(res);
    cartList.value = res
    let num = 0;
    cartList.value.forEach(item => {
      num += item.price * item.num;
    })
    total.value = num.toFixed(2);
  })

})

</script>
<template>
  <main v-if="user.token">
    <!-- 下拉菜单 -->
    <van-dropdown-menu style="font-weight: bold;">
      <!-- <van-icon @click="$router.push('/home')" name="arrow-left" /> -->
      <van-dropdown-item v-model="value1" :options="option1" />
    </van-dropdown-menu>

    <!-- 标签页 -->
    <van-tabs v-model:active="active" sticky>
      <van-tab :title="'全部 '">
        <!-- 常买的店 -->
        <div class="buyList">
          <!-- 单元格组件 -->
          <van-cell title="常买的店" is-link value="查看更多" />

          <van-grid :border="false">
            <van-grid-item v-for="item in buyList" :icon="item.img" :key="item.id" :text="item.shopname" />
          </van-grid>
        </div>

        <!-- 订单列表 -->
        <div class="orderList">

          <!-- 这个也可以定义子组件 -->
          <div class="orderitem" v-for="item in buyList" :key="item.id">
            <header @click="$router.push({ name: 'shop', query: { id: item.id } })" class="shopHeader">
              <van-image :src="item.img"></van-image>
              <h3>{{ item.shopname }} <van-icon name="arrow" /></h3>
              <span style="color:#f66">待付款</span>
            </header>

            <van-grid @click="$router.push({ name: 'shop', query: { id: item.id } })" icon-size="80px" :border="false">
              <!--     for循环里面嵌套for循环ok-->
              <van-grid-item v-for="item1 in (cartList.filter(item1 => item1.id == item.id))" :icon="item1.img" />
              <van-grid-item :text="`共${cartList.filter(item1 => item1.id == item.id).length}件`" />
            </van-grid>
            <p class="pay">
              <!--数组里的对象怎么用reduce求和 ，如下：  初始值为 0   或者4 配送费是4-->
            <p style="position: relative; right:20px">
            <h3>应付款 ￥ {{ cartList.filter(item1 => item1.id == item.id).reduce((acc, curr) => acc + curr.price *
              curr.num, 4) }}</h3>
            </p>
            <van-button @click="$router.push({ path: '/orderDetail', query: { id: item.id } })" type="primary" size="small"
              color="linear-gradient(to right, #ff6034, #ee0a24)" round
              style="margin-top: 10px; position: relative; left: 20px">去付款</van-button>
            </p>
          </div>

        </div>
      </van-tab>

      <van-tab :title="'配送中 '">
        内容 {{ index }}
      </van-tab>
      <van-tab :title="'待评价 '">
        内容 {{ index }}
      </van-tab>
      <van-tab :title="'退款 '">
        内容 {{ index }}
      </van-tab>
    </van-tabs>
  </main>

  <!-- 也可以自定义图标和页面下面的 -->
  <div v-else>
    <HeaderCom title="订单"></HeaderCom>
  <van-empty description="还没有登陆哦，登陆后才可查看">
    <van-button @click="$router.push('/login')" round type="primary" color="linear-gradient(to right, #ff6034, #ee0a24)"s class="bottom-button">登陆 / 注册</van-button>
  </van-empty>
  </div>


</template>

<style lang="scss" scoped>
main {
  background-color: #f7f7f7;
  height: 100%;
  overflow: auto;
}

.buyList {
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  padding: 5px;
  width: 90%;
  margin: 5px auto;
}

.orderList {
  width: 90%;
  height: 100%;
  background-color: #f7f7f7;
  border-radius: 10px;
  margin: 10px auto;
  margin-bottom: 50px;
}

.orderitem {
  margin-bottom: 20px;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
}

.van-image {
  width: 30px;
  height: 30px;

}

.shopHeader {
  display: flex;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.pay {
  position: relative;
  left: 70%;
  padding: 10px;
}

.bottom-button {
  width: 160px;
  height: 40px;
}
</style>